<style lang="less" rel="stylesheet/less" type="text/less">
.v-admin-equipment-views {
  padding: 20px;
  height: 100%;
}
</style>
<template>
  <div class="v-admin-equipment-views">
    <Tabs v-model="tag_name" type="card">
      <!-- 新增 -->
      <!-- <TabPane
				label="新增"
				name="新增">
				<createPlan
					ref="create"
					@postStore="createPlan"
				/>
      </TabPane>-->

      <!-- 默认价格 -->
      <TabPane label="默认价格" name="默认价格">
        <plan-index :loading="table_loading" :data="data" @update="updatePlan" />
        <br />

        <!-- 分页组件 -->
        <!-- <Row
					type="flex"
					justify="center">
					<Page
						:total="listTotal"
						:current="page_info.page"
						:page-size="page_info.per_page"
						:page-size-opts="[2,5,10]"
						placement="top"
						show-sizer
						show-total
						@on-change="pageChange"
						@on-page-size-change="perPageChange"
					/>
        </Row>-->
      </TabPane>
    </Tabs>

    <Modal
      v-model="is_show_modal"
      title="计费方案编辑"
      class-name="vertical-middle-modal"
      @on-cancel="hide_Modal"
    >
      <plan-edit v-if="is_show_modal" :data="editData" />
      <div slot="footer" />
    </Modal>
  </div>
</template>
<script>
import createPlan from "./create.vue";
import qs from "qs";
import planIndex from "./index.vue";
import planEdit from "./edit.vue";

export default {
  components: {
    createPlan,
    planIndex,
    planEdit
  },
  data() {
    return {
      table_loading: false,
      editData: {},
      is_show_modal: false,
      tag_name: "",
      listTotal: null,
      data: [],
      page_info: {
        // 分页信息
        page: 1,
        per_page: 10
      },

      search_info: {
        page: 1,
        per_page: 10
      }
    };
  },
  created() {
    this.token = sessionStorage.getItem("token");
    this.planList(this.search_info);
  },
  methods: {
    /**
     * 页码改变
     * @param  {string} page {当前页码}
     * @return {undefined}
     */
    pageChange(page) {
      this.search_info.page = page;
      this.search_info.per_page = this.page_info.per_page;
      this.planList(this.search_info);
    },

    /**
     * 每页显示数改变
     * @param  {string} size {当前每页显示数}
     * @return {undefined}
     */
    perPageChange(size) {
      this.search_info.per_page = size;
      this.page_info.per_page = size;
      this.planList(this.page_info);
    },

    /**
     * 切换tab
     * @param  {string} tab_name {tab的name}
     * @return {undefined}
     */
    // changeTab(tab_name) {
    //    		if (tab_name === '默认价格') {
    // 		this.planList(this.search_info);

    // 		this.$refs.create.handleReset('formValidate');
    // 	}
    // },

    /**
     *
     * 创建计费的方法
     */
    createPlan(param) {
      this.axios
        .post(
          `${window.location.origin}/admin/api/v1/admin/add_charging_scheme`,
          param
        )

        .then(({ data }) => {
          if (data.code === 200) {
            this.$Message.success("创建成功");

            this.$refs.create.handleReset("formValidate");
          } else if (data.code === 7003) {
            this.$Message.error({
              content: "token验证失败,过期或token错误,请重新登录",
              duration: 5,
              closable: true
            });
            this.$router.push({
              path: "/admin-login"
            });
          }
        })
        .catch(err => {
          this.$Message.error(err.message);
        });
    },

    /*
         请求计费方案列表
        */
    planList(param) {
      this.table_loading = true;
      param.token = this.token;

      const query_str = qs.stringify(param);

      this.axios
        .post(
          `${window.location.origin}/admin/api/v1/admin/charging_schemes`,
          query_str
        )
        .then(({ data }) => {
          if (data.code === 200) {
            this.data = data.charging_schemes.data;

            let arr = [];

            let arr_2 = [];

            for (let key in JSON.parse(this.data[0].prices).face) {
              arr.push({ name: key });

              arr_2.push(JSON.parse(this.data[0].prices).face[key]);
            }
            for (let index = 0; index < arr.length; index++) {
              arr[index].prices = arr_2[index];
            }

            this.data = arr;

            this.listTotal = data.charging_schemes.total;
          } else if (data.code === 7003) {
            this.$Message.error({
              content: "token验证失败,过期或token错误,请重新登录",
              duration: 5,
              closable: true
            });
            this.$router.push({
              path: "/admin-login"
            });
          }
        })
        .catch(err => {
          this.$Message.error({
            content: err.message || err.statusText,
            duration: 5,
            closable: true
          });
        })
        .then(() => {
          this.table_loading = false;
        });
    },

    /**
     * 打开编辑按钮回调
     */
    showEdit(detail) {
      this.is_show_modal = true;
      this.editData = detail;
    },

    /**
     *
     * 关闭编辑框
     */
    hide_Modal() {
      this.editData = null;
    },

    /**
     * 修改计费方案
     */
    updatePlan(param, editPrice) {
      let new_param = {
        token: this.token,
        id: 1,
        group: "face",
        endpoint: param.name,
        price: editPrice,
        _method: "PUT"
      };

      const query_str = qs.stringify(new_param);

      this.table_loading = true;
      this.axios
        .post(
          `${window.location.origin}/admin/api/v1/admin/update_charging_scheme`,
          query_str
        )
        .then(({ data }) => {
          if (data.code === 200) {
            this.planList(this.search_info);
            this.$Message.success("修改成功!");
          } else if (data.code === 7003) {
            this.$Message.error({
              content: "token验证失败,过期或token错误,请重新登录",
              duration: 5,
              closable: true
            });
            this.$router.push({
              path: "/admin-login"
            });
          }
        })
        .catch(err => {
          this.$Message.error({
            content: err.message || err.statusText,
            duration: 5,
            closable: true
          });
        });
    }
  }
};
</script>
